<template>
    <div>
        <el-tabs v-model="activePage" type="card" closable @tab-click="changePage" @tab-remove="removePageTab" style="padding: 5px 10px 0;">
            <el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="item.fullPath" v-for="item in pageList"></el-tab-pane>
        </el-tabs>
 
        <router-view v-slot="{ Component }" :key="$route.fullPath" @initLoadDataList="initLoadDataList" @loadDatasourceList="loadDatasourceList">
            <keep-alive>
                <component :is="Component" />
            </keep-alive>
        </router-view>
    </div>
</template>
 
<script setup lang="ts">
import { computed, onMounted, reactive, ref ,defineEmits, watch} from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { useGlobalData } from '@/store/global'


const $route = useRoute();

const $router = useRouter();
let activePage = ref("")
const changePage=(key:any)=>{
    activePage = key.name;
}
const pageList:any = reactive([])
const linkList:any = reactive([])

const global = useGlobalData();
const pageTabNameMap = computed(()=>{
    return global.pageTabNameMap;
})

const $emits = defineEmits(['initLoadDataList','loadDatasourceList'])

const initLoadDataList=(param)=>{
    $emits('initLoadDataList',param)
    console.log('initLoadDataList')
}

const loadDatasourceList=()=>{
    $emits('loadDatasourceList')
    console.log('loadDatasourceList')
}

const removePageTab=(key:string)=>{
   
}
watch(()=>$route,(newRoute,oldRoute)=>{
    // activePage = newRoute.fullPath;
    // if (linkList.indexOf(newRoute.fullPath) < 0) {
    //     linkList.push(newRoute.fullPath);
    //     pageList.push(newRoute);
    // }
})
watch(()=>activePage,(key)=>{
    $router.push(key)
})
onMounted(()=>{
    pageList.push($route)
    linkList.push($route.fullPath);
    let {fullPath,name} = $route
    console.log(fullPath)
    console.log(name)
    // global.addTableName({fullPath:name});

})








</script>
 
<style scoped lang="scss">
</style>